<template>
    <div class="main">
      <span>订单管理</span>
      <el-card class="box-card">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="formInline"
          :rules="rules"
        >
          <el-col :span="8">
            <el-form-item label="商户ID/名称：" prop="merchantNameId">
              <el-input v-model="formInline.merchantNameId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单号：" prop="orderNum">
              <el-input v-model="formInline.orderNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配送方式：" prop="presentType">
              <el-select v-model="formInline.presentType">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="到店自取" value="到店自取"></el-option>
                <el-option label="同城配送" value="同城配送"></el-option>
                <el-option label="跨城配送" value="跨城配送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="下单日期：">
              <el-date-picker
                v-model="formInline.dateTime"
                type="daterange"
                value-format="timestamp"
                :clearable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="formInline.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in useType" :key="index">
          <el-table
            :data="item.name==='all'?AllOrderList:orderList"
            style="width: 100%"
            stripe
            row-key="merchantId"
          >
            <!-- 商户ID -->
            <el-table-column
              align="center"
              prop="merchantId"
              label="商户ID"
            >
            </el-table-column>
            <!-- 商户名称 -->
            <el-table-column
              align="center"
              prop="merchantName"
              label="商户名称"
            >
            </el-table-column>
            <!-- 订单号 -->
            <el-table-column
              align="center"
              prop="orderNum"
              label="订单号"
            >
            </el-table-column>
            <!-- 商品列表 -->
            <el-table-column
              align="center"
              label="商品列表"
            >
              <template v-slot="{ row }">
                <ul>
                  <li v-for="(obj,ind) in row.commodityList" :key="ind" class="commodityList">
                    {{obj.comName}}  x {{obj.comCount}}
                  </li>
                </ul>
              </template>
            </el-table-column>
            <!-- 下单时间 -->
            <el-table-column
              align="center"
              prop="orderTime"
              label="下单时间"
            >
              <template v-slot="{ row }">
                <span>{{row.orderTime|formatDateOrder}}</span>
              </template>
            </el-table-column>
            <!-- 订单总金额 -->
            <el-table-column
              align="center"
              prop="orderTotal"
              label="订单总金额"
            >
            </el-table-column>
            <!-- 配送方式 -->
            <el-table-column
              align="center"
              prop="presentType"
              label="配送方式"
            >
            </el-table-column>
            <!-- 收货地址/提货人 -->
            <el-table-column
              align="center"
              prop="address"
              label="收货地址/提货人"
            >
            </el-table-column>
            <!-- 订单状态 -->
            <el-table-column
              align="center"
              prop="orderStatus"
              label="订单状态"
            >
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              align="center"
              label="操作"
            >
              <template v-slot="{ row }">
                <el-button v-show="row.operate.includes(1)" type="text">确认提货</el-button>
                <el-button v-show="row.operate.includes(2)" type="text">确认收货</el-button>
                <el-button v-show="row.operate.includes(3)" type="text">确认配送</el-button>
                <el-button v-show="row.operate.includes(5)" type="text">确认发货</el-button>
                <el-button v-show="row.operate.includes(6)" type="text">退款</el-button>
                <el-button type="text">查看订单</el-button>
                <el-button v-show="row.operate.includes(4)" type="text">取消订单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
import { getUseType, getOrderList } from '@/api/order'
import { queryFn } from '@/utils'
export default {
  name: 'orderList',

  data () {
    return {
      useType: [],
      orderList: [],
      AllOrderList: [],
      formInline: {
        merchantNameId: '',
        orderNum: '',
        presentType: '全部',
        dateTime: [],
        phone: ''
      },
      rules: {
        merchantNameId: [
          // { required: true, message: '商户ID/名称不能为空' }
        ],
        orderNum: [
          // { required: true, message: '商户ID/名称不能为空' }
        ],
        presentType: [
          // { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        phone: [
          // { required: true, message: '商户ID/名称不能为空' }
        ]
      },
      activeName: 'all',
      useTypeNum: 0
    }
  },
  created () {
    this.getUseType()
    this.getAllOrderList()
  },
  mounted () {

  },

  methods: {
    async getAllOrderList () {
      const { data } = await getOrderList()
      this.AllOrderList = data
    },
    async getOrderList () {
      const id = this.useTypeNum + 1
      const res = queryFn({
        merchantId: +this.formInline.merchantNameId ? +this.formInline.merchantNameId : '',
        merchantName: +this.formInline.merchantNameId ? '' : this.formInline.merchantNameId,
        presentType: this.formInline.presentType === '全部' ? '' : this.formInline.presentType,
        orderTime_gte: this.formInline.dateTime[0],
        orderTime_lte: this.formInline.dateTime[1],
        phone: this.formInline.phone,
        orderNum: this.orderNum,
        orderType: this.activeName === 'all' ? '' : this.activeName
      })
      const { data } = await getOrderList(res)
      if (id === 1) {
        this.AllOrderList = data
      } else {
        this.orderList = data
      }
      // this.useType[this.useTypeNum].orderList
    },
    async getUseType () {
      const { data } = await getUseType()
      this.useType = data
    },
    onSubmit () {
      // console.log('submit!')
      this.getOrderList()
    },
    resetForm (formName) {
      this.formInline.dateTime = []
      this.$refs[formName].resetFields()
    },
    async handleClick (tab, event) {
      this.useTypeNum = +tab.index
      if (tab.name === 'all') {
        this.getAllOrderList()
      } else {
        const res = queryFn({
          orderType: tab.name
        })
        const { data } = await getOrderList(res)
        this.orderList = data
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 20px 0;
}
ul {
  padding-inline-start: 0;
  /deep/.commodityList {
  list-style: none !important;
}
}
</style>
